import React, { Component, memo, Suspense } from 'react';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import {
  Row,
  Col,
  Card,
  List,
  Avatar,
  Button,
  Form,
  Popconfirm,
  Divider,
  Modal,
  Slider,
  InputNumber,
  Collapse,
  Icon,
  message,
  Select,
  Timeline,
  Input,
  Tabs,
  TimePicker,
  Table,
} from 'antd';
import Link from 'umi/link';
import { formatMessage } from 'umi/locale';
import { connect } from 'dva';
import styles from '../Dashboard/Analysis.less';

import { Stage, Layer, Text, Image, Line, Label, Tag, Rect } from 'react-konva';
import { Bar } from '@/components/Charts';



const SalesCard = memo(
  ({ salesData }) => (
    <Card bordered={false} bodyStyle={{ padding: 0 }}>
      <div className={styles.salesCard}>
        <Row>
          <Col xl={16} lg={12} md={12} sm={24} xs={24}>
            <div className={styles.salesBar}>
              <Bar
                height={295}
                title={
                  "本年月生产记录"
                }
                data={salesData}
              />
            </div>
          </Col>
        </Row>
      </div>
    </Card>
  )
);
@connect(({ logger }) => ({ logger }))
@Form.create()
class HdLogger extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    loggerFileChoosed: "", // 选择的日志文件名称,要根据选择,去确定要显示的日志.
    timeChoosed: null,
    timeChoosedHour: "",
  };
  callback = e => {
    const { dispatch } = this.props;
    dispatch({
      type: "logger/getProduceAmountRecord"
    });
  };

  openFileSaveDir = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'logger/openFileSaveDir'
    });
  }

  clearFileSaveDir = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'logger/clearFileSaveDir'
    });
  };

  onChange = (key, e) => {
    const { dispatch } = this.props;
    this.setState({
      loggerFileChoosed: e.props.children,
    });
    dispatch({
      type: "logger/getLoggerInfo",
      payload: e.props.children,
    })
  }

  onIdSelectChange = (key, e) => {
    const { dispatch } = this.props;
    this.setState({
      debugIdChoosed: e.props.children,
    });
  };

  updateLoggerInfoByBoardIndex = e => {
    const { dispatch } = this.props;
    const { debugIdChoosed } = this.state;
    dispatch({
      type: 'logger/updateLoggerInfoByBoardIndex',
      payload: debugIdChoosed,
    });
  };
  updateLoggerInfoByHourTime = e => {
    const { dispatch } = this.props;
    const { timeChoosedHour } = this.state;
    dispatch({
      type: 'logger/updateLoggerInfoByHourTime',
      payload: timeChoosedHour,
    });
  };

  onTimeChooseChange = (time) => {
    let timeHour;
    if (time !== null) {
      timeHour = time.format("HH:mm:ss")
      console.log("timeHour:,", timeHour);
    } else {
      timeHour = ""
    }
    this.setState({
      timeChoosed: time,
      timeChoosedHour: timeHour,
    });
  }

  openDebugDir = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'logger/openDebugDir'
    });
  };

  handleDebugIdOnSearch = value => {
    let that = this
    if (!this.timer) {
      this.timer = setTimeout(function () {
        that.searchDebugIdValue(value)
        that.timer = null
      }, 50)
    }
  };

  searchDebugIdValue = (value) => {
    const { dispatch } = this.props;
    dispatch({
      type: "logger/searchDebugIdValue",
      payload: value,
    });
  };


  updateLoggerInfoImgByKeyWord = e => {
    const { dispatch } = this.props;
    const { keyId } = this.state;
    dispatch({
      type: 'logger/updateLoggerInfoImgByKeyWord',
      payload: KeyWord,
    });
  };

  render() {
    const Panel = Collapse.Panel;
    const {
      timeChoosed,
      debugIdChoosed,
    } = this.state;
    const {
      loggerFiles, // 日志文件,所有的日志文件,显示.顺序是按照日期倒叙排列.
      loggerInfo,  // 日志显示的内容,如果是按照id号的时候,是要单独显示这个id的日志文件
      debugIdList,  // debug文件的id号.
      produceAmountData,   // 月产量记录
      produceDayAmountData,  // 日产量记录
      debugInfoEndFlag,  // 日志是否已经到显示的结尾
    } = this.props.logger;

    const { Option } = Select;
    const children = [];
    for (let i = 0; i < loggerFiles.length; i++) {
      children.push(<Option key={i.toString() + i}>{loggerFiles[i]}</Option>);
    }
    


    const idChildren = [];
    for (let i = 0; i < debugIdList.length; i++) {
      idChildren.push(<Option key={i.toString() + i}>{debugIdList[i]}</Option>);
    }

    const timeitem = [];
    for (let i = 0; i < loggerInfo.length; i++) {
      let head = loggerInfo[i][0]
      let info = loggerInfo[i][1]
      timeitem.push(
        <Timeline.Item color={"green"} key={i.toString()}>
          <p>{head} {info}</p>
        </Timeline.Item>
      )
    };

    const salesData = [];
    for (let i = 0; i < produceAmountData.length; i += 1) {
      salesData.push({
        x: produceAmountData[i][0],
        y: produceAmountData[i][1],
      });
    }

    const columns = [
      {
        title: <font style={{ color: '#9933cc', fontSize: 18 }}>日期</font>,
        dataIndex: 'dayIndex',
        key: 'dayIndex',
      },
      {
        title: <font style={{ color: '#9933cc', fontSize: 18 }}>产量</font>,
        dataIndex: 'dayAmount',
        key: 'dayAmount',
      }];

    return (
      <>
        <Collapse onChange={this.callback}   style={{ marginLeft: 20,marginTop : 50 }}>
          <Panel header="生产统计记录" key="生产统计记录">
            < GridContent>
              <Suspense fallback={null}>
                <SalesCard
                  salesData={salesData}
                />
              </Suspense>
            </GridContent>
            <Card style={{ marginTop: 20 }} title="近一个月日产量记录">
              <p>{<font style={{ color: '#FF0000', fontSize: 16 }}>备注: 产量记录会在新的一年开始的时候进行重置,请在年末做好备忘记录 </font>}</p>
              {produceDayAmountData.length >= 1 ? <Table columns={columns} dataSource={produceDayAmountData} /> : ""}
            </Card>
          </Panel>
        </Collapse>
      </>
    );
  }
}
export default HdLogger;
